<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0 auto;
        }

        .box {
            width: 500px;
            height: 200px;
            /* background-color: blue; */
            text-align: center;

        }

        .box b {
            font-size: 24px;
            /* color: white; */
            margin-left: 20px;
        }

        .box p {
            font-size: 20px;
            /* color: white; */
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <b>随机抽人</b>
        <p>点到的同学：</p><br>
        <button class="btn1">开始</button>
        <button class="btn2">结束</button>
    </div>
    <script>
        const personArr = ['周杰伦', '刘德华', '周星驰', '易业煜', '陈佳豪', '成龙']
        // const arr = ['one', 'two', 'three']
        const btn1 = document.querySelector('.btn1')
        const btn2 = document.querySelector('.btn2')
        const p = document.querySelector('p')

        let time
        let num = 0

        btn1.addEventListener('click', function () {
            time = setInterval(function () {
                num = Math.floor(Math.random() * personArr.length)
                p.innerHTML = `点到的同学：${personArr[num]}`
            }, 200);

            if (personArr.length === 1) {
                btn1.disabled = 'true'
                btn2.disabled = 'true'
                alert('剩下一个元素')
            }

        })
        btn2.addEventListener('click', function () {
            clearInterval(time)
            // p.innerHTML = `点到的同学：${personArr[num]}`
            personArr.splice(personArr[num], 1)
        })
    </script>
</body>

</html>